<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    .view {
        /*width: 200px;*/
        height: 0;
        margin: 0 auto;
        background: #ccc;
        display: none;
        background: url("../images/tc_background.png") no-repeat center;
        transform-origin: center;
    }

    .hit {
        display: block;
        margin: 0 auto
    }
    .main{
        position: relative;
        top:100px;
        text-align: center;
    }
    .up{
        height: 50px;
        margin: 0 auto;
        background: #ccc;
        display: none;
        background: url(../images/tc_background.png) no-repeat center 9px;
        /*transform-origin: center;*/
    }
    .down{
        height: 50px;
        margin: 0 auto;
        background: #ccc;
        display: none;
        background: url(../images/tc_background.png) no-repeat center -622px;
    }
    .close_btn{
        display: none;
    }
    .close
    {
        animation:myfirst 1s;
        -moz-animation:myfirst 1s; /* Firefox */
        -webkit-animation:myfirst 1s; /* Safari and Chrome */
        -o-animation:myfirst 1s; /* Opera */
    }

    @keyframes myfirst
    {
        0%   {height:578px}
        100% {height:0px;display: none}
    }
    .active{
        animation:open 1s;
        -moz-animation:open 1s; /* Firefox */
        -webkit-animation:open 1s; /* Safari and Chrome */
        -o-animation:open 1s; /* Opera */
    }
    @keyframes open
    {
        0%   {height:0px}
        5%{
            height: 50px;
        }
        100% {height:578px;display: block}
    }


</style>
<body>
<button class="hit">点击</button>

<div class="main">
    <div class="up"></div>
    <div class="view"><span>hidesffd</span><p>adsfasdfas</p><p>adsf阿斯顿发生地方asdfas</p></div>
    <div class="down"></div>
    <div><button class="close_btn">关闭</button></div>
</div>

</body>
<script>
    $(".hit").on("click", function () {
        $(".up").show();
        $(".down").show()
        $(".view").animate({height: "578px"}, 1000,function(){
            $(".close_btn").show();
        })
                .css("display", "block")
    })
    $(".close_btn").on("click",function(){
        $(".close_btn").hide();
        $(".view").animate({height: "0"}, 1000,function(){
            $(".up").hide();
            $(".down").hide()
            $(".view").css("display", "none")
        })
    })
</script>
</html>